<template>
    <div class="login">
        <div class="logintop">
            <span class="iconfont text" @click="back">&#xe601;</span>
            <span class="text2">{{this.type=='login'?'登录':'注册'}}</span>
            <span class="iconfont text">&#xe62b;</span>
        </div>
        <img src="https://s.yezgea02.com/1604045825972/newbee-mall-vue3-app-logo.png" alt="" class="imgs">
        <div class="logins">
            <form v-if="type=='login'" @submit="onSubmit">
                <div class="new">
                    <div class="newname"><span>用户名</span></div>
                    <div class="newput"><input type="text" placeholder="用户名" v-model="username"></div>
                </div>
                <div class="new">
                    <div class="newname"><span>密码</span></div>
                    <div class="newput"><input type="password" placeholder="密码" v-model="password"></div>
                </div>
                <div class="verify">
                    <div class="newname"><span>验证码</span></div>
                    <div class="newput"><input type="text" placeholder="输入验证码"></div>
                    <div @click="changeCode()" class="verifys">
                    <!-- 引入验证码组件 -->
                    <identify :identifyCode="identifyCode"></identify>
                    </div>
                </div>
                 <p class="register" @click="toggle('register')">立即注册</p>
                <button class="sub">登录</button>
            </form>
            <form v-else @submit="onSubmit">
                <div class="new">
                    <div class="newname"><span>用户名</span></div>
                    <div class="newput"><input type="text" placeholder="用户名" v-model="username"></div>
                </div>
                <div class="new">
                    <div class="newname"><span>密码</span></div>
                    <div class="newput"><input type="password" placeholder="密码" v-model="password"></div>
                </div>
                <div class="verify">
                    <div class="newname"><span>验证码</span></div>
                    <div class="newput"><input type="text" placeholder="输入验证码" v-model="verify"></div>
                    <div @click="changeCode()" class="verifys">
                    <!-- 引入验证码组件 -->
                    <identify :identifyCode="identifyCode"></identify>
                    </div>
                </div>
                 <p class="register" @click="toggle('login')">已有登录账号</p>
                <button class="sub">注册</button>
            </form>
        </div>

    </div>
</template>

<script>
import identify from '../../common/identify'
import request from '../../api/api'
import Cookie from 'js-cookie'
import PubSub from 'pubsub-js'
export default {
  components: {identify},
  data () {
    return {
      // 验证码初始值
      identifyCode: '1234',
      // 验证码的随机取值范围
      identifyCodes: '1234567890',
      // 登录状态
      type: 'login',
      // 验证码
      verify: '',
      username: '',
      password: ''
    }
  },
  mounted () {
    // let data = this.$md5(this.passWord)
    // console.log(data)// e10adc3949ba59abbe56e057f20f883e
    // 刷新页面就生成随机验证码
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  methods: {
    // 返回首页
    back () {
      this.$router.push('/')
    },
    onSubmit () {
      if (this.type === 'login') {
        request({
          method: 'POST',
          url: '/user/login',
          data: {
            loginName: this.username,
            passwordMd5: this.md5(this.password)
          }
        }).then(res => {
          console.log(res)
          // 判断登录成功跳转到home页
          if (res.data.message === 'SUCCESS') {
            this.$router.push('/')
          } else {
            console.log(res.data.message)
          }
          // 把token值保存到Cookie里
          Cookie.set('auth', res.data.data)
          // 发布模式
          PubSub.publish('auth', res.data.data)
        })
      } else {
        request({
          method: 'POST',
          url: '/user/register',
          data: {
            loginName: this.username,
            password: this.password
          }
        }).then(res => {
          console.log(res)
          // 判断登录成功跳转到home页
          if (res.data.message === 'SUCCESS') {
            this.$router.push('/')
          } else {
            console.log(res.data.message)
          }
          // 把token值保存到Cookie里
          Cookie.set('auth', res.data.data)
          // 发布模式
          PubSub.publish('auth', res.data.data)
        })
      }
    },

    // 点击切换登录方式
    toggle (e) {
      this.type = e
      // 重新刷新验证码
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 点击验证码刷新验证码
    changeCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成一个随机整数  randomNum(0, 10) 0 到 10 的随机整数， 包含 0 和 10
    randomNum (min, max) {
      max = max + 1
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 随机生成验证码字符串
    makeCode (data, len) {
      for (let i = 0; i < len; i++) {
        this.identifyCode += data[this.randomNum(0, data.length - 1)]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login{
    text-align: center;
    .logintop{
        width: 100%;
        height: 1.2rem;
        border-bottom: 1px solid #F7F8F8;
        line-height: 1.2rem;
        display: flex;
        text-align: center;
        .text{
            width: 10%;
        }
        .text2{
            width: 80%;
        }
    }
    .imgs{
        width: 3rem;
        height: 3rem;
        margin-top: 2rem;
    }
    .logins{
        padding: 0 0.4rem;
        height: 5rem;
        .new{
            display: flex;
            padding: 0.15rem 0.5rem;
            border-bottom: 1px solid #c8c9cc;
            .newname{
                width: 40%;
                font-size: 18px;
                line-height: 0.55rem;
                text-align: left;
            }
            .newput{
                width: 60%;
                input{
                     font-size: 18px;
                }
            }
        }
        .verify{
            display: flex;
            padding: 0.15rem 0.5rem;
            border-bottom: 1px solid #c8c9cc;
            .newname{
                width: 30%;
                font-size: 18px;
                text-align: left;
                line-height: 0.6rem;
            }
            .newput{
                width: 30%;
                input{
                     font-size: 18px;
                     line-height: 0.6rem;
                }
            }
            .verifys{
                width: 40%;
            }
        }
        .register{
            text-align: left;
            margin-top: 0.5rem;
            color:#1989fa;
        }
        .sub{
        width: 100%;
        height: 1.1rem;
        background: #1baeae;
        color: #fff;
        line-height: 1.1rem;
        text-align: center;
         margin-top: 0.5rem;
         font-size: 18px;
         border-radius: 0.5rem;
        }
    }
}
</style>
